<template>
  <XForm ref="form" :formData="data" :fieldList="fieldList" :options="formOption" :rules="rules">
    <template #payAmountAppend="{ value }">
      <!-- {{currency}}—— -->
      {{ data.original_order_currency }}
    </template>
  </XForm>
</template>

<script setup>
import XForm from "@/components/XForm/index.vue"
import { overallOptions, getCurrency } from "@/api/public"
import { nextTick } from "vue"
const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
  formModel: {
    type: Object,
    default: () => {},
  },
})

onMounted(() => {
  getCountryOpt()
})

const emit = defineEmits(["changInput"])

const currencyChange = (e) => {
  props.formModel.payment.original_order_currency = e
}
const router = useRouter()
const { type } = router.currentRoute.value.query
const orderAmountCount = (key) => {
  let formData = form.value.getFormValues() || {}
  formData[key] = formData[key].replace(/[^\d.]/g, "").replace(/(\.\d{2})\d+/, "$1")
  form.value.setFormValues(formData)
}
const countryOpt = ref([])
const getCountryOpt = async () => {
  nextTick(async () => {
    countryOpt.value = (await getCurrency()).data.map((v) => ({ label: v.label, value: v.label }))
  })
}
const publicStyle = { style: { width: "240px" } }
const form = ref()
const fieldList = ref([
  {
    type: "title",
    label: "支付信息",
  },
  {
    field: "original_order_currency",
    label: "币种",
    type: "select",
    options: {
      data: countryOpt,
    },
    style: { width: "166px" },
    change: currencyChange,
  },
  {
    // 产品说换
    field: "original_order_amount",
    // field: 'pay_amount',
    label: "支付金额",
    append: "payAmountAppend",
    disabled: true,
    tooltip: "支付金额=产品总价+运费收入-优惠金额",
  },
  {
    field: "order_amount",
    label: "产品总价",
    append: "payAmountAppend",
    ...publicStyle,
    disabled: true,
  },
  {
    field: "shipping_revenue",
    label: "运费收入",
    append: "payAmountAppend",
    ...publicStyle,
    disabled: true,
    show: ({ model }) => {
      return type == "edit" || props?.formModel?.base?.new_order_reason == 6
    },
  },
  {
    field: "discount_amount",
    label: "优惠金额",
    // type:"inputNumber",
    append: "payAmountAppend",
    ...publicStyle,
    disabled: true,
    show: ({ model }) => {
      // model.build_order_type != 1
      return type == "edit" || props?.formModel?.base?.new_order_reason == 6
    },
  },
  {
    field: "shipping_revenue",
    label: "运费收入",
    append: "payAmountAppend",
    ...publicStyle,
    change: orderAmountCount,
    show: ({ model }) => {
      return type != "edit" && props?.formModel?.base?.new_order_reason != 6
    },
  },

  {
    field: "discount_amount",
    label: "优惠金额",
    // type:"inputNumber",
    append: "payAmountAppend",
    ...publicStyle,
    change: orderAmountCount,
    show: ({ model }) => {
      return type != "edit" && props?.formModel?.base?.new_order_reason != 6
    },
  },
  {
    field: "payment_mode",
    label: "支付方式",
    type: "select",
    origin: "payment_method",
    options: {
      data: [],
    },
    ...publicStyle,
  },
])

const rules = reactive({
  original_order_currency: [{ required: true, message: "请选择币种", trigger: "change" }],
})

const formOption = ref({
  inline: true,
  labelPosition: "top",
})
const getOptions = async () => {
  const OptionsMap = fieldList.value.filter((n, i) => {
    return n.origin
  })

  const optionsParams = OptionsMap.map((n) => n.origin)
  try {
    const res = await overallOptions({
      params: optionsParams,
      option: "new",
    })
    const { data } = res
    for (let item in data) {
      const _index = fieldList.value.findIndex((n) => n.origin === item)
      if (_index) {
        fieldList.value[_index].options.data = data[item].map((n) => ({
          ...n,
          value: n.value + "",
        }))
      }
    }
  } catch (e) {
    console.error(e)
  }
}

defineExpose({ form })
</script>

<style lang="scss" scoped></style>
